<template>
	<view class="page-wrap">
		<searchBar @search="toSearch"></searchBar>

		<view class="add-friend-way-list">
			<view class="add-friend-way-item" @tap="toAddFriendsByPhone">
				<view class="item-left">
					<image class="item-icon" src="../../static/phoneIcon.png"></image>
					<view class="item-name">手机号添加</view>
				</view>
				<image class="right-arrow" src="../../static/rightArrowIcon.png"></image>
			</view>
			<button class="add-friend-way-item btm-item" open-type="share">
				<view class="item-left">
					<image class="item-icon" src="../../static/wxIcon2.png"></image>
					<view class="item-name">邀请好友</view>
				</view>
				<image class="right-arrow" src="../../static/rightArrowIcon.png"></image>
			</button>
		</view>

		<!-- 朋友列表 -->
		<friendsListBlock :list="friendList" :isSearchResult="!!searchKey" @itemClk="toFriendsDetail"></friendsListBlock>

		<!-- 右侧字母表 -->
		<letterList></letterList>

	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		computed: {
			...mapState(['friendList','shareImages']),
		},
		data() {
			return {
		        searchKey:''
			}
		},
		mounted(){
			this.$store.dispatch('getFriendList')
		},
        onShareAppMessage() {
            let fileUrl = '190570665238597'
			this.shareImages.forEach(item => {
				if(item.code == 'ShareUser'){
					fileUrl = item.fileUrl
				}
			});
            return {
                title: '我正在添加你为好友', //转发页面的标题
			    imageUrl: `https://friendlyapi.yuelinshe.com/api/settingservice/previewfileinfo?id=${fileUrl}`,
                path: `/pages/index/index?fromUserId=${this.$store.state.userInfo.id}` //转发页面的路径以及携带的参数
            }
        },
		methods: {
			toSearch(key) {
				this.searchKey = key
			    this.$store.dispatch('getFriendList', key? { keywords: key} : {})
			},
			toAddFriendsByPhone() {
				uni.navigateTo({
					url: '/pages/myFriends/addFriendsByPhone'
				})
			},
			toFriendsDetail(item) {
				uni.navigateTo({
					url: '/pages/expertDetail/index?id=' + item.userId
				})
			}
		}
	}
</script>


<style lang="less">
	.add-friend-way-list {
		.add-friend-way-item {
			height: 100rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #EEEEEE;
			margin: 0 28rpx;

			.item-left {
				display: flex;
				align-items: center;

				.item-icon {
					width: 54rpx;
					height: 54rpx;
				}

				.item-name {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
					margin-left: 20rpx;
				}
			}

			.right-arrow {
				width: 54rpx;
				height: 54rpx;
			}
			&.btm-item{
				background-color: #fff;
			    text-align: left;
				&::after{
					border:none;
				}
			}
		}
	}
</style>
